<div id="<?php echo $uniqid;?>" style="padding:5px">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">
        <tr bgcolor="#FFFFFF">
            <td  class="tlabel">请选择上级：</td>
            <td>
                <input class="item-pid forminput inputstyle" style="width:400px;" />
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >名称：</td>
            <td><input type="text"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入名称.."  v-model="params.name"/>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >栏目类型：</td>
            <td><input type="text"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入栏目类型.."  v-model="params.type"/>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >图片：</td>
            <td class="main">
                <div title="上传图片" style="display: flex; height: 80px; overflow: hidden;">
                    <div class="img-box" v-if="params.image">
                        <a class="linkWrapper" target="_blank" :href="params.image" title="查看原图">
                            <img height="70px" :src="params.image+'?imageView2/1/w/100/h/100'"></a>
                        <div class="img-box-del" @click="params.image=''">
                            <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                        </div>
                    </div>
                    <div class="add-image-button" v-else>
                        <a class="btn btn-default btn-lg" @click="uploadBox('categoryVm.params.image')" href="javascript:void(0);">
                            <i class="iconfont icon-tianjia"></i>
                        </a>
                    </div>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >状态：</td>
            <td>
                <el-checkbox-group v-model="params.status">
                    <el-checkbox true-label="normal" false-label="hidden">显示</el-checkbox>
                </el-checkbox-group>
            </td>
        </tr>
        <tr v-if="params.status === 'hidden'">
            <td class="tlabel" >特殊项目显示：</td>
            <td>
                <el-checkbox-group v-model="specialShowChecked" >
                    <el-checkbox v-for="(item,key) in specialShow" :label="item.code" :key="item.code">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >描述：</td>
            <td><input type="text"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入描述.."  v-model="params.description"/>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >排序：</td>
            <td><input type="text"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入排序.." v-model="params.weigh" /></td>
        </tr>
    </table>
</div>
<script>
    var categoryVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            params: JSON.parse("<?php echo addslashes($dataset);?>"),
            catTree: JSON.parse("<?php echo addslashes($catTree);?>"),
            specialShow: JSON.parse("<?php echo addslashes($specialShow);?>"),
            specialShowChecked:[],
        },
        mounted() {
            this.init();
        },
        methods: {
            init(){
                $('#<?php echo $uniqid;?> .item-pid').combotree({
                    data: this.catTree,
                    panelHeight: 300,
                });
                if(this.params.special_show > 0){
                    for (item of this.specialShow){
                        if(item.code === (item.code & this.params.special_show)){
                            this.specialShowChecked.push(item.code);
                        }
                    }
                }
                if (parseInt(this.params.pid)>0) {
                    $('#<?php echo $uniqid;?> .item-pid').combotree('setValue', parseInt(this.params.pid));
                }
            },
            submit(){
                categoryVm.params.pid = $('#<?php echo $uniqid;?> .item-pid').val() ? $('#<?php echo $uniqid;?> .item-pid').val() : 0;
                if(this.params.status === 'hidden' && this.specialShowChecked.length > 0){
                    let special_show = 0;
                    for(code of this.specialShowChecked){
                        special_show = (special_show | code);
                    }
                    this.params.special_show = special_show;
                }else{
                    this.params.special_show = 0;
                }
                let act = categoryVm.params.id>0 ? 'edit' : 'add';
                $.post('/admin/category/' + act, categoryVm.params, function (data) {
                    if (parseInt(data.ret) === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        $("#categoryDlg").dialog('close');
                        if (typeof categoryReload == "function") {
                            categoryReload();
                        }
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            }
        }
    });
    $(function () {
        $('#categorysubmit').click(function () {
            categoryVm.submit();
        });
        qiniu_single('categoryedit<?php echo $uniqid;?>', function (res) {
            console.log(res);
            categoryVm.params.image = '';
            categoryVm.params.image = res;
        });
    });
</script>
